<template>
  <div class="kp-bind">
    <header class="bind_header">
        <div class="bind_text">
            <span class="bind_span"></span><div class="bind_kp">绑定手机号</div>
        </div>
    </header>
    <div class="bind_tab">
        <div class="bind_headPhoto">
            <img src="../../assets/face.png" />
        </div>
        <div class="bind_dl">
            <div class="bind_speed">
                <form>
                    <div class="input_bind">
                        <input type="text" name="" placeholder="手机号码" value="13912131234"/><span class="input_span"></span>
                    </div>
                    <div class="input_bind">
                        <input type="text" name="" placeholder="短信验证码" /><span class="input_ver">获取验证码</span>
                    </div>
                    <div class="input_bind">
                        <input type="text" name="" placeholder="请输入邀请码(选填)" />
                    </div>
                    <input type="submit" value="立即绑定" class="inp_sub inp_gray"/>
                </form>
            </div>
        </div>
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return{
      }
    },
    mounted() {
      //载入后执行
      // 		let loginParams = { userName: this.msg, userPwd: this.msg };
      // 		Login(loginParams)
      // 			.then(function(res) {
      // 				console.log(res);
      // 			})
      // 			.catch(function(err) {
      // 				console.log(err);
      // 			});
    },
    methods: {
      //方法放置
    },
    created() {
      //创建后
    },
    watch: {
      //监听放置
    },
    components: {
    
    },
    computed: {}
  };
</script>

<style scoped>
  .bind_header{height:72px;}
  .bind_text{display:-webkit-box;display:flex;}
  .bind_span{display:inline-block;width:36px;height:36px;background:url("../../assets/fanhui.png") 0 0;background-size:cover;margin:31px 228px 0 30px;}
  .bind_kp{-webkit-box-flex:1;flex:1;margin:31px 0 0 0;height:32px;width:228px;font-size:32px;letter-spacing: 1px;font-family:"MicrosoftYaHei";}
  .bind_headPhoto{display:block;margin:73px auto 51px;width:213px;height:213px;}
  .bind_headPhoto>img{width:213px;height:213px;border-radius:50%;}
  .bind_speed{padding:0 28px;}
  .input_bind{width:690px;height:110px;padding:30px 0;box-sizing:border-box;border-bottom:1px solid rgba(183,183,183,0.3);position:relative;display:-webkit-flex;display:flex;}
  .input_bind>input{border:none;outline:none;font-size:32px;font-family:"MicrosoftYaHeiLight";width:100%;flex:1;-webkit-box-flex:1;height:42px;line-height:42px;color:rgb(51,51,51);letter-spacing:0;}
  .input_bind>input::-webkit-input-placeholder{color:rgb(138,138,138);}
  .input_span{display:inline-block;width:28px;height:28px;margin-top:7px;background:url("../../assets/qingchu.png") 0 0 no-repeat;background-size:cover;}
  .input_ver{font-size:32px;color:rgb(59,195,194);height:42px;line-height:42px;}
  .inp_sub{border:none;background:rgb(59,195,194);width:679px;height:80px;border-radius:40px;color:#fff;font-size:36px;outline:none;margin:100px 5px 0;}
  .inp_gray{background:rgb(216,216,216);}
</style>
